<template>
  <v-app id="inspire">
    <v-content>
      <v-container fluid>
        <v-snackbar
          v-model="snackbar"
        >
          {{ text }}
          <v-btn
            color="pink"
            text
            @click="snackbar = false"
          >
            Close
          </v-btn>
        </v-snackbar>
  <h1 style="text-align: center">New Invitations</h1>
  <displayList
    :_title="invitationTitle"
    @wantToEatBanana="agree"
    @wantNotToEatBanana="reject"
    :_items="invitedConferences"
    :_item-per-page="4"
  >
  </displayList>
        <side-bar></side-bar>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import DisplayList from '../DisplayList'
import store from '../../store'
import SideBar from './SideBar'
export default {
  name: 'NewInvitation',
  components: {
    SideBar,
    DisplayList
  },
  data () {
    const generateInvitedConference = _ => {
      const conferences = []
      this.$axios.post('/meetingInvitedMe', store.state.userName)
        .then(resp => {
          if (resp != null) {
            var response = resp.data
            response.forEach((meeting, index) => {
              conferences.push({
                chair: meeting.chair,
                pcMemberNames: meeting.pcMembers,
                abbrName: meeting.abbrName,
                fullName: meeting.fullName,
                date: meeting.date,
                spot: meeting.spot,
                submitDueDate: meeting.submitDueDate,
                resultReleaseDate: meeting.resultReleaseDate,
                statusMessage: meeting.status === 0 ? 'To Be Approved'
                  : (meeting.status === 1 ? 'Already Approved'
                    : (meeting.status === 2 ? 'Allow Contribution'
                      : (meeting.status === 3 ? 'Reviewing'
                        : (meeting.status === 4 ? 'Showing Results'
                          : (meeting.status === 5 ? 'Closed' : 'Rejected'))))),
                topics: meeting.topics
              })
              console.log(meeting.topics)
            })
            return conferences
          } else return null
        })
        .catch(error => {
          console.log(error)
        })
      return conferences
    }
    return {
      invitationTitle: 'NewInvitations',
      invitedConferences: generateInvitedConference(),
      text: '',
      snackbar: false
    }
  },
  methods: {
    agree (item, itemIndex, chosenTopics) {
      console.log('chosenTopics:' + chosenTopics)
      if (chosenTopics.length === 0) {
        this.text = '必须选择至少一个topic'
        this.snackbar = true
      } else {
        this.$axios.post('/agreeInvitation', {
          username: store.state.userName,
          meetingFullName: item.fullName,
          topics: chosenTopics
        })
          .then(resp => {
            if (resp.status === 200 && resp.data === 'accepted') {
              this.text = 'successful agreement'
              this.snackbar = true
              // alert('successful agreement')
              this.invitedConferences.splice(itemIndex, 1)
              // location.reload()
            } else {
              this.text = 'agree error'
              this.snackbar = true
              // alert('agree error')
            }
          })
          .catch(error => {
            console.log(error)
          })
      }
    },
    reject (item, itemIndex) {
      this.$axios.post('/rejectInvitation', {
        username: store.state.userName,
        meetingFullName: item.fullName
      })
        .then(resp => {
          if (resp.status === 200 && resp.data === 'rejected') {
            this.text = 'successful Rejectiond'
            this.snackbar = true
            // alert('successful Rejection')
            this.invitedConferences.splice(itemIndex, 1)
            location.reload()
          } else {
            this.text = 'reject error'
            this.snackbar = true
            // alert('reject error')
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
